<template>
	<view>
		测试网络数据
		<button @click="getData">获取数据</button>
		<button @click="getImg">获取图片数据</button>
		测试图片文字上传
		  <view>
		      <text>请输入文字:</text>
		      <input v-model="textInput" placeholder="输入内容" />
		 </view>
		<button >选择图片上传</button>
		<view v-if=" images.length">
		      <text>图片预览:</text>
		      <view class="image-preview">
		        <image 
		          v-for="(image, index) in  images" 
		          :key="index" 
		          :src="image" 
		          mode="aspectFit" 
		          style="max-width: 100px; max-height: 100px; margin-right: 10px;" 
		        />
		      </view>
		 </view>
			
		
		<button @click="goWriteBlogPost" >这是个草稿</button>
		
		
		 <button @click="chooseImageAndUpload" >上传图片</button>
		<button @click="testHtml" >测试html</button>
	</view>
</template>

<script>
import { methods } from "../../uni_modules/uview-ui/libs/mixin/mixin";
import request from "../../utils/request.js"
	export default {
		data() {
			return {
				userId:'',
				token:'',
				 tepPostId:'',
				 textInput: '', // 用户输入的文字
				 imagePreviews: [], // 图片预览
				 images:[],
				
			};
		},
		
		onLoad(options) {
		        // 接收 postId 参数
		        const postId = options.postId;
		        this.userId=uni.getStorageSync("UID");
		        this.token=uni.getStorageSync("token");
				if(postId===''){
					this.tepPostId=this.generatePostId();
				}else{
					this.tepPostId=postId;
				}
				console.log('接收到的 postId:', this.tepPostId);
		        // 你可以在这里进行后续操作，比如根据 postId 加载数据
		 },
		mounted() {
		},
		methods:{
			goWriteBlogPost(){
				const draftId = '1734351900612_1_956';  // 示例草稿ID   '123456_1_190'
				const resourceId = -1;  // 示例资源ID
				uni.navigateTo({
					url:`/pages/writeBlogPost/writeBlogPost?draftId=${draftId}&resourceId=${resourceId}`
					//url:`/pages/writeBlogPost/writeBlogPost`
				})
			},
			async getData(){
				let data={
					count:10
				}
				let result=await  request.sendUniPostRequestByNetWork("1",undefined,"getRecommendedBlogs",data,"/post/getRecommendedBlogs");
				console.log(result);
			},
			async getImg(){
				let url=this.baseUrl+"/file/1"+"?type=avatar";
				console.log(url);
				let result=await request.sendUniGetRequestByNetWork("1",undefined,url);
				console.log(result);
			},
			//临时postId
			 generatePostId() {
			            const timestamp = Date.now(); // 当前时间戳
			            const randomPart = Math.floor(Math.random() * 1000); // 生成随机数
			            const postId = `${timestamp}_${this.userId}_${randomPart}`;
			            return postId;
			    },
			//选择图片
			 chooseImage() {
			  return new Promise((resolve, reject) => {
			    uni.chooseImage({
			      count: 9, // 默认选择的图片数量
			      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
			      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
			      success: (res) => {
			        const tempFilePaths = res.tempFilePaths;
			        resolve(tempFilePaths);
			      },
			      fail: (err) => {
			        reject(err);
			      }
			    });
			  });
			},
			// 上传单张图片，支持传递自定义的 URL、数据和头部
			uploadImage(filePath, url, data = {}, header = {}) {
			  return new Promise((resolve, reject) => {
			    uni.uploadFile({
			      url: url, // 使用传入的 URL
			      filePath: filePath,
			      name: 'file', // 后端接收文件的字段名
			      formData: {
			        ...data // 扩展其他额外的数据
			      },
			      header: {
			        ...header // 扩展自定义的头部
			      },
			      success: (res) => {
			        try {
			          const resultData = JSON.parse(res.data); // 假设服务器返回的结果是 JSON 格式
			          resolve(resultData); // 返回上传成功的数据
			        } catch (error) {
			          reject('解析返回数据失败'); // 解析失败处理
			        }
			      },
			      fail: (err) => {
			        reject(err); // 上传失败处理
			      }
			    });
			  });
			},
			// 上传多张图片
			// uploadImages(images, url, data = {},header = {}) {
			//   const uploadPromises = images.map(image => this.uploadImage(image, url, data,header)); // 确保使用 this.uploadImage
			//   return Promise.all(uploadPromises) // 返回所有上传的结果
			//     .then(results => {
			//       // 所有图片上传成功后的处理
			//      // console.log('上传成功的图片:', results);
			//       return results; // 返回所有上传成功的结果
			//     })
			//     .catch(err => {
			//       // 处理上传失败的情况
			//       console.error('上传失败:', err);
			//       throw err; // 抛出错误以便外部捕获
			//     });
			// },
			uploadImages(images, url, data = {}, header = {}) {
			  // 使用 map 遍历每个图片，并将索引传递到 data 中
			  const uploadPromises = images.map((image, index) => {
			    // 在上传时给 data 添加一个新的属性，表示是第几张图片
			    const updatedData = { ...data, imageIndex: index + 1 }; // imageIndex 为图片的索引，从 1 开始
			    return this.uploadImage(image, url, updatedData, header);
			  });
			
			  return Promise.all(uploadPromises) // 返回所有上传的结果
			    .then(results => {
			      // 所有图片上传成功后的处理
			      return results; // 返回所有上传成功的结果
			    })
			    .catch(err => {
			      // 处理上传失败的情况
			      console.error('上传失败:', err);
			      throw err; // 抛出错误以便外部捕获
			    });
			},
			//选择图片并上传
			async chooseImageAndUpload() {
			  try {
			    const tempFilePaths = await this.chooseImage();
			   const url = this.baseUrl+"/file/upload"; // 自定义上传的 URL
			   console.log(this.tepPostId);
			     const data = {
			       userId: this.userId,
				   signId:this.tepPostId,
				   type:'blogFile'
			     };
				 const header = {
				    uid:this.userId,
					token:this.token
				   };
			    const uploadedImages = await this.uploadImages(tempFilePaths, url, data,header);
			    // 处理上传成功的图片 URL
			     console.log('成功上传的图片:', uploadedImages);
				 
				 
				 
			    //return uploadedData; // 返回上传成功的数据
			  } catch (error) {
			    throw error; // 抛出错误以便外部捕获
			  }
			},
			// 使用示例
			// (async () => {
			//   try {
			//     const uploadedData = await chooseImageAndUpload();
			//     console.log('上传成功:', uploadedData);
			//   } catch (error) {
			//     console.error('上传失败:', error);
			//   }
			// })();
			extractImages(html) {
			    const images = [];
			    // 正则表达式，匹配包含 src 和 data-custom="storageFileName=..." 的 img 标签
			    const imgRegex = /<img[^>]*\s+src="([^"]*)"\s+[^>]*data-custom="storageFileName=([^"]*)"/g;
			    
			    let match;
			    // 使用 exec 来逐个查找匹配项
			    while ((match = imgRegex.exec(html)) !== null) {
			        images.push({
			            src: match[1],  // 图片的 src 属性
			            storageFileName: match[2]  // storageFileName 属性的值
			        });
			    }
			
			    return images;
			},
			testHtml(){
			// 测试数据
			const html = `<p>This is the content of my f
			    <img src="" data-custom="storageFileName=123456_1_190_1.jpg" data-local="blob:http://localhost:8080/8a2be413-cf87-4a34-a51c-b5f02c9c5608">
			    irst blog p
			    <img src="" data-custom="storageFileName=123456_1_190_13.gif" data-local="blob:http://localhost:8080/397efe04-173f-487a-ad98-93a0374da0e6">
			    <img src="" data-custom="storageFileName=123456_1_190_11.jpg" data-local="blob:http://localhost:8080/82934402-3586-4732-a52d-1ca93eaa65fe">post.
			</p>`;
			
			console.log(this.extractImages(html));
			}
		},
		

}
	
</script>

<style lang="scss">

</style>
